<template>
  <div class="consumption-account-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <!-- <a-space>
            <div>金额：￥2.4341万</div>
            <div>数量：{{ dataList.length }}条</div>
          </a-space> -->
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-two-line" :data="dataList" @sorter-change="sortChange" row-key="id" :loading="loading" :pagination="false" :scroll="{ y: '100%' }">
            <template #columns>
              <a-table-column title="序号" #cell="{ record, rowIndex }" :width="40">
                {{ rowIndex + 1 }}
              </a-table-column>
              <a-table-column title="收入/支出" #cell="{ record, rowIndex }" :width="60">
                {{ record.ioType == 1 ? '收入' : '支出' }}
              </a-table-column>
              <a-table-column title="时间" #cell="{ record, rowIndex }" data-index="gmtCreate" :sortable="{ sortDirections: ['ascend', 'descend'] }" :width="80">
                {{ $setTime(record.gmtCreate) }}
              </a-table-column>
              <a-table-column title="操作人" #cell="{ record, rowIndex }" :width="80">
                {{ record.optUserName }}
              </a-table-column>
              <a-table-column title="金额（RMB）" #cell="{ record, rowIndex }" data-index="amount" :sortable="{ sortDirections: ['ascend', 'descend'] }" :width="80"> ￥{{ record.amount }} </a-table-column>
              <a-table-column title="账户余额（之前）" #cell="{ record, rowIndex }" :width="80"> ￥{{ record.beforeAvailabeBalance }} </a-table-column>
              <a-table-column title="账户余额（之后）" #cell="{ record, rowIndex }" :width="80"> ￥{{ record.afterAvailabeBalance }} </a-table-column>
              <a-table-column title="项目" #cell="{ record, rowIndex }" :width="80">
                {{ productTypeMap[record.bizType] }}
              </a-table-column>
              <a-table-column title="任务类型" #cell="{ record, rowIndex }" :width="80">
                {{ taskTypeMap[record.taskType] }}
              </a-table-column>
              <a-table-column title="关联单据" #cell="{ record, rowIndex }" :width="120">
                {{ record.docNumber }}
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import { ref, onMounted } from 'vue'
  import { findWalletAccountItemPage } from '@/api/finance/wallet'
  import { Modal, Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  const props = defineProps(['accountInfo'])
  const filterItem = ref([
    {
      key: 'ioType',
      label: '收入/支出',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '收入', value: '1' },
        { label: '支出', value: '-1' },
      ],
    },
    {
      key: 'gmtCreate',
      label: '日期',
      value: ref(),
      type: 'date_range',
      width: 240,
      attrs: {
        placeholder: ['开始日期', '结束日期'],
        'allow-clear': false,
      },
    },
    {
      key: 'price',
      label: '金额',
      value: ref([]),
      type: 'num_range',
      width: '80',
      optionField: {
        //最小值和最大值的转换
        min: 'amountStart',
        max: 'amountEnd',
      },
    },
    {
      key: 'bizType',
      label: '项目',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '充值', value: 'DEPOSIT' },
        { label: '转账', value: 'TRANSFER' },
        { label: '提现', value: 'WITHDRAW' },
        { label: '提现驳回', value: 'WITHDRAW_BACK' },
        { label: '发布任务', value: 'PUBLISH_TASK' },
        { label: '撤回任务', value: 'REVOKE_TASK' },
        { label: '终止任务', value: 'NEGOTIATE_TASK' },
        { label: '任务佣金', value: 'TASK_COMMISSION' },
        { label: '任务服务费', value: 'TASK_SERVICE_FEE' },
      ],
    },
    {
      key: 'taskType',
      label: '任务类型',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [
        { label: '新品套图任务', value: 'NEW_PRODUCT_PICTURE' },
        { label: '快速修图任务', value: 'QUICK_FIX_PICTURE' },
        { label: '原图任务', value: 'ORIGINAL_PICTURE' },
        { label: '拍摄视频任务', value: 'SHOOT_VIDEO' },
      ],
    },
    {
      key: 'optUserName',
      label: '操作人',
      value: ref(),
      type: 'input_search',
      width: '180',
    },
  ])
  const productTypeMap = {
    DEPOSIT: '充值',
    TRANSFER: '转账',
    WITHDRAW: '提现',
    WITHDRAW_BACK: '提现驳回',
    PUBLISH_TASK: '发布任务',
    REVOKE_TASK: '撤回任务',
    NEGOTIATE_TASK: '终止任务',
    TASK_COMMISSION: '任务佣金',
    TASK_SERVICE_FEE: '任务服务费',
  }
  const taskTypeMap = {
    NEW_PRODUCT_PICTURE: '新品套图任务',
    QUICK_FIX_PICTURE: '快速修图任务',
    ORIGINAL_PICTURE: '原图任务',
    SHOOT_VIDEO: '拍摄视频任务',
  }
  let dataList = ref([])
  let loading = ref(false)
  let pageNation = ref({ total: 0, pageSize: 20, pageNum: 1 })
  let ids = ref([])
  let searchValue: any = ref({})

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }
  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }
  const searchByVal = (val: any) => {
    searchValue.value = {}
    searchValue.value = _.cloneDeep(val)
    if (searchValue.value.gmtCreate) {
      searchValue.value.dataType = 'gmtCreate'
      searchValue.value.startDate = `${searchValue.value.gmtCreate[0]} 00:00:00`
      searchValue.value.endDate = `${searchValue.value.gmtCreate[1]} 23:59:59`
      delete searchValue.value.gmtCreate
    } else {
      delete searchValue.value.dataType
      delete searchValue.value.startDate
      delete searchValue.value.endDate
    }
    delete searchValue.value.price
    pageNation.value.pageNum = 1
    getList()
  }
  const getList = async () => {
    let params = {
      ...searchValue.value,
      accountIdList: `${props.accountInfo.consumeWalletAccount.id},${props.accountInfo.giftWalletAccount.id}`,
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    console.log(params)

    if (!params.sortField) {
      params.sortField = 'gmtCreate'
      params.sortAsc = false
    }
    loading.value = true
    const res: any = await findWalletAccountItemPage(params)
    if (res) {
      dataList.value = res?.data?.records || []
      pageNation.value.total = res?.data?.total || 0
    }
    loading.value = false
  }

  const refreshList = () => {
    pageNation.value.pageNum = 1
    getList()
  }

  onMounted(() => {
    getList()
  })

  defineExpose({ refreshList })
</script>

<style lang="less" scoped>
  .consumption-account-con {
    height: 100%;
    width: 100%;
    // background-color: white;
  }
</style>
